<template>
  <el-menu
    :default-active="route.path" class="app-header"
    mode="horizontal"
    :ellipsis="false"
    router >
    <el-menu-item index="logo" class="logo-item">
      <img src="/logo.png" alt="猫眼电影" class="logo" />
    </el-menu-item>
    
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/movies">电影</el-menu-item>
    
    <div class="flex-grow" />
    
    <template v-if="userStore.isLoggedIn">
      <el-menu-item index="/orders">我的订单</el-menu-item>
      
      <!-- 管理员专用菜单 -->
      <el-menu-item 
        v-if="isAdmin" 
        index="/admin"
        style="color: #f56c6c; font-weight: bold;"
      >
        管理后台
      </el-menu-item>
      
      <el-sub-menu index="profile-menu">
        <template #title>
          Hi, {{ userStore.userInfo?.username }}
          <el-tag v-if="isAdmin" type="danger" size="small" style="margin-left: 5px;">管理员</el-tag>
        </template>
        <el-menu-item index="/profile">个人中心</el-menu-item>
        <el-menu-item @click="handleLogout">退出登录</el-menu-item>
      </el-sub-menu>
    </template>
    
    <template v-else>
       <el-menu-item index="/login">登录/注册</el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router' // P5 导入 useRoute 和 useRouter
import { useUserStore } from '../store/user' // P5 导入 Pinia store

const route = useRoute() // 获取当前路由信息 (用于高亮 :default-active)
const router = useRouter() // 获取路由实例 (用于 '退出登录' 跳转)
const userStore = useUserStore() // 获取 Pinia 的 user store 实例

// 检查是否为管理员
const isAdmin = computed(() => {
  return userStore.userInfo && userStore.userInfo.username === 'admin'
})

// P5: 定义退出登录方法
const handleLogout = () => {
  userStore.logout() // 调用 Pinia store 中的 action
  router.push('/login') // 跳转回登录页
}
</script>

<style scoped>
.app-header {
  padding: 0 50px;
}
.logo-item {
  opacity: 1; /* 取消 el-menu-item 的默认禁用样式 */
}
.logo {
  height: 40px;
  margin-right: 10px;
  margin-top: 10px;
}
.flex-grow {
  flex-grow: 1; /* 关键: 占据所有剩余空间 */
}
</style>